﻿<!doctype html>
<html>

<head>
    <link href="../css/mzui.min.css" rel="stylesheet">
</head>
<style type="text/css">
    .totalButtonGroup {
        position: absolute;
        bottom: 5px;
        width: 98%;
        text-align: center;
        line-height: 30px;
        font-size: 0.6rem;
        border: 1px solid #f33939;
        border-radius: 13px;
    }

    .carListCLass {
        background-color: rgb(255, 255, 255);
        border-radius: 13px;
        position: absolute;
        bottom: 0px;
        width: 98%;
        height: 200px;
        margin: 1%;
        padding: 1%;
    }
</style>

<body style="background: transparent;">
<div style="display: inline-block;position: absolute;width: 100%;height: 100%;">
    <div style="margin: 20px;" onclick="closeFomerView()">
        <i class="icon icon-chevron-left" style="font-size: 1rem;color: #fff;"></i>
    </div>
    <div id="carListApp" class="carListCLass" v-bind:style="{ height: carListHeight}">
        <div class="heading">
            <div class="title">商品列表</div>
        </div>
        <div class="list with-divider" style="overflow-y: auto;" v-bind:style="{height: listMaxHeight}">
            <div class="item with-avatar" v-for="good in goods">
                <div class="avatar"><img v-bind:src="good.url" alt=""></div>
                <div class="title">
                    <div>{{good.name}}</div>
                </div>
                <div style="display:inline-block">
                    <div style="float:right">
                        ￥{{good.price}} X
                        <i class="icon icon-plus" v-on:click="good.number +=1"></i> {{good.number}}
                        <i class="icon icon-minus" v-on:click="good.number -=1"></i>
                    </div>
                    <div>
                        ￥{{good.subtotal}}
                    </div>
                </div>
            </div>
        </div>
        <div class="totalButtonGroup">
            <div style="width: 50%;background-color: rgb(243, 57, 57);float: left;color: rgb(238, 238, 238);border-bottom-left-radius:  inherit;border-top-left-radius:  inherit;">
                总计
            </div>
            <div style="width:50%;float:left"><span>￥</span><span>{{total}}</span></div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/CustomMath.js"></script>
<script type="text/javascript">
    var carListApp = new Vue({
        el: '#carListApp',
        data: {
            carListHeight: "500px",
            listMaxHeight : "400px",
            total: "0",
            goods: [{
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }, {
                url: "https://cn.vuejs.org/images/logo.png",
                number: 1,
                price: 3.2,
                name: "大肉",
                code: "123",
                subtotal: 0
            }]
        }
    });
    apiready = function () {
        carListApp.carListHeight = CustomMath.accMul(api.winHeight , 0.75) + "px";
        carListApp.listMaxHeight = CustomMath.subtr(CustomMath.accMul(api.winHeight , 0.75), 100);
    };
    apiready();


    //如果列表中存在商品，则添加数量，如果列表不存在商品 则新增
    function addToGoods(goodCode) {
        for (var i in carListApp.goods) {
            var good = carListApp.goods[i]
            if (goodCode == good.code) {
                good.number++;
                return;
            }
        }
        carListApp.goods.push({
            url: "https://cn.vuejs.org/images/logo.png",
            number: 1,
            price: 3.2,
            name: "大肉",
            code: goodCode,
            subtotal: 0
        });

    }

    function calcunateTotal(goods) {
        var total = 0;
        for (var i in goods) {
            goods[i].subtotal = CustomMath.accMul(goods[i].price, goods[i].number);
            total += goods[i].subtotal;
        }

    }

    function scanResultTodo(goodCode) {
        addToGoods(goodCode);
    }

    function closeFomerView() {
        api.closeWin({
            name: 'settlementWin'
        });
    }
</script>

</html>
